import React, { useState, useEffect } from "react";
import Modal from "@mui/material/Modal";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

export type DelayedModalProps = {
  message?: string;
  onClose?: () => void;
};

const DelayedModal: React.FC<DelayedModalProps> = ({ message = "Hello from SDK!", onClose }) => {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setShow(true);
    }, 3000);
    return () => clearTimeout(timer);
  }, []);

  const handleClose = () => {
    setShow(false);
    if (onClose) {
      onClose();
    }
  };

  if (!show) return null;

  return (
    <Modal
      open={show}
      onClose={handleClose}
      aria-labelledby="delayed-modal-title"
      aria-describedby="delayed-modal-description">
      <Box sx={modalStyle}>
        <Typography
          id="delayed-modal-title"
          variant="h6"
          component="h2">
          SDK 提示
        </Typography>
        <Typography
          id="delayed-modal-description"
          sx={{ mt: 2 }}>
          {message}
        </Typography>
        <Button
          onClick={handleClose}
          sx={{ mt: 2 }}
          variant="contained">
          关闭
        </Button>
      </Box>
    </Modal>
  );
};

// 只导出组件，避免 Fast Refresh 警告
export default DelayedModal;

const modalStyle = {
  position: "absolute" as "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper",
  // border: '2px solid #000', // 移除硬编码边框，让主题控制
  boxShadow: 24,
  p: 4,
};
